<template>
	<el-container>
		<el-header>
			拼团设置
		</el-header>
		<el-main style="background-color: #FFF">
			<el-form :model="form" :rules="formRules" ref="configForm" label-width="140px" label-position="left" v-loading="isLoading">
				<el-tabs v-model="activeName" class="demo-tabs">
					<el-tab-pane label="基本设置" name="tt10">
						<el-form-item label="是否开启拼团">
							<div>
								<el-radio-group v-model="form.switch_config">
									<el-radio :label="1">开启</el-radio>
									<el-radio :label="0">关闭</el-radio>
								</el-radio-group>
								<div class="el-form-item-help">
									全局开关，关闭后，所有拼团活动将不可见
								</div>
							</div>
						</el-form-item>
						<el-form-item label="自动关团时间区间">
							<div style="width: 90%;">
								<el-row>
									<el-col :span="24">
										<el-slider v-model="form.timeout_range" range show-stops :min="1" :max="99" />
									</el-col>
									<el-col :span="12">
										<el-input-number v-model="form.timeout_range[0]" :min="1" :max="50"
														 controls-position="right" placeholder="起始" />
									</el-col>
									<el-col :span="12">
										<el-input-number v-model="form.timeout_range[1]" :min="2" :max="99"
														 controls-position="right" placeholder="结束" />
									</el-col>
								</el-row>
								<div class="el-form-item-help">
									单位：小时
								</div>
							</div>
						</el-form-item>
						<el-form-item label="支付超时时间区间">
							<div style="width: 90%;">
								<el-row>
									<el-col :span="24">
										<el-slider v-model="form.close_time_range" range show-stops :min="10" :max="180" />
									</el-col>
									<el-col :span="12">
										<el-input-number v-model="form.close_time_range[0]" :min="10" :max="90"
														 controls-position="right" placeholder="起始" />
									</el-col>
									<el-col :span="12">
										<el-input-number v-model="form.close_time_range[1]" :min="11" :max="180"
														 controls-position="right" placeholder="结束" />
									</el-col>
								</el-row>
								<div class="el-form-item-help">
									单位：分钟
								</div>
							</div>
						</el-form-item>
					</el-tab-pane>
				</el-tabs>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保 存</el-button>
					<el-button @click="getConfigData">重 置</el-button>
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "tuan-setting",
	data() {
		return {
			activeName: 'tt10',
			isLoading: false,
			timeoutRangeMarks: {
				1: '1',
				99: '99'
			},
			pageTitle: '拼团设置',
			form: {
				switch_config: 1,
				timeout_range: [1, 24],
				close_time_range: [1, 60],
			},
			formRules: {
				waiting_period: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				lowest_withdraw: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				withdraw_rate: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				min_no_fee: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				max_no_fee: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_concept: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_fenxiao_name: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_withdraw: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_account: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_my_team: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_child: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
			}
		}
	},
	mounted() {
		this.getConfigData();
	},
	methods:{
		getConfigData() {
			this.isLoading = true;
			this.$API.gdshop.sysSetting.info({config_key:'tuangou'}).then(res => {
				this.isLoading = false;
				if (res.code === 0) {
					this.pageTitle = res.data.config_name;
					this.form = res.data.config_value;
				}
				else {
					this.$message.error(res.message);
				}
			})
		},
		async onSubmit() {
			try {
				await this.$refs.configForm.validate();
			}
			catch (e) {
				console.log(e);
				return;
			}
			// console.log(this.form);
			// return
			this.isLoading = true;
			this.$API.gdshop.sysSetting.update({
				config_key: 'tuangou',
				config_value: this.form
			}).then(res => {
				this.isLoading = false;
				if (res.code === 0) {
					this.$message.success('保存成功');
				}
				else {
					this.$message.error(res.message);
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.el-form-item-help{
	color: #AAA;
}
.el-input-group__append{
	border: none;
	width: auto;
}
</style>
